<!DOCTYPE HTML>
<html>
<head>
<!--<link href='http://fonts.googleapis.com/css?family=Snippet|Arvo:700italic|Podkova' rel='stylesheet' type='text/css'>-->
<title>pixi.js example 10 Text</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// Load them google fonts before starting...!
WebFontConfig = {
google: {
families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
},
active: function() {
// do something
init();
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
function init()
{
var assetsToLoader = ["desyrel.fnt"];
// create a new loader
var loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded;
//begin load
loader.load();
function onAssetsLoaded()
{
var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", {font: "35px Desyrel", align: "right"});
bitmapFontText.position.x = 620 - bitmapFontText.width - 20;
bitmapFontText.position.y = 20;
stage.addChild(bitmapFontText);
}
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// add a shiney background..
var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
stage.addChild(background);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(620, 400);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame(animate);
// create some white text using the Snippet webfont
var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", {font: "35px Snippet", fill: "white", align: "left"});
textSample.position.x = 20;
textSample.position.y = 20;
// create a text object with a nice stroke
var spinningText = new PIXI.Text("I'm fun!", {font: "bold 60px Podkova", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});
// setting the anchor point to 0.5 will center align the text... great for spinning!
spinningText.anchor.x = spinningText.anchor.y = 0.5;
spinningText.position.x = 620 / 2;
spinningText.position.y = 400 / 2;
// create a text object that will be updated..
var countingText = new PIXI.Text("COUNT 4EVAR: 0", {font: "bold italic 60px Arvo", fill: "#3e1707", align: "center", stroke: "#a4410e", strokeThickness: 7});
countingText.position.x = 620 / 2;
countingText.position.y = 320;
countingText.anchor.x = 0.5;
stage.addChild(textSample);
stage.addChild(spinningText);
stage.addChild(countingText);
var count = 0;
var score = 0;
function animate() {
requestAnimFrame( animate );
count++;
if(count == 50)
{
count = 0;
score++;
// update the text...
countingText.setText("COUNT 4EVAR: " + score);
}
// just for fun, lets rotate the text
spinningText.rotation += 0.03;
// render the stage
renderer.render(stage);
}
}
</script>
</body>
</html>
